<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="item of swiperList" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl" alt="">
            </swiper-slide>

            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-scrollbar" slot="scrollbar"></div>
        </swiper>
    </div>
</template>
<script>
export default {
  name: "HomeSwiper",
  props:{
    swiperList:{
      type:Array
    }
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        },
        /* 是否循环 */
        loop: true,
        autoplay: {
          /* 触碰后自动切换是否停止 */
          disableOnInteraction: false
        }
      },
      // swiperList: [
      //   {
      //     id: "001",
      //     imgUrl:
      //       "http://img1.qunarzz.com/piao/fusion/1811/b4/ac00a771d74f5a02.jpg_750x200_a71cff60.jpg"
      //   },
      //   {
      //     id: "002",
      //     imgUrl:
      //       "http://img1.qunarzz.com/piao/fusion/1710/15/898d6d74e9b06202.jpg_750x200_89b4509e.jpg"
      //   },
      //   {
      //     id: "003",
      //     imgUrl:
      //       "http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg"
      //   }
      // ]
    };
  }
};
</script>
<style scoped>
.swiper-img {
  width: 100%;
  height: 300px;
}
/* //深度作用选择器 */
/* //如果你希望 scoped 样式中的一个选择器能够作用得"更深",例如影响子组件，你可以使用 >>> 操作符： */
.wrapper >>> .swiper-pagination-bullet-active {
  background: #fff !important;
}
</style>